body {
  margin: 0;
  background: #C3E1FD;
}
ul, li {
  margin: 0;
  padding: 0;
}
.login {
  width: 433px;
  overflow: hidden;
  margin: 0 auto;
}
.loginbox {
  width: 333px;
  height: 200px;
  margin: 100px auto 20px auto;
  padding: 50px;
  text-align: center;
  background: url('screen.png') no-repeat;
}

.yourname {
  margin-top: 20px;
  padding: 8px;
  border-radius: 5px;
}
.loginbtn {
  perspective: 500;
  -webkit-perspective: 500; /* Safari 和 Chrome */
}
.loginbtn a {
  display: block;
  width: 80%;
  padding: 16px 20px;
  border: 1px solid #fff;
  outline: none;
  margin: 0 auto;
  background: #709FCD;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-family: 'Arial';
  box-shadow: 2px 2px 5px #333;
  transform: rotateX(36deg);
}
.loginbtn a:hover {
  background: #508EC9;
}
.loginbtn a:active {
  background: #3F7FC7;
}


.face-img {
  cursor: pointer;
}

.face-list {
  position: fixed;
  left: 50%;
  margin-left: 40px;
  top: 148px;
  width: 433px;
  text-align: center;
  box-shadow: 2px 2px 2px #508EC9;
}
.face-list li {
  display: inline-block;
  padding: 2px;
  opacity: .8;
}
.face-list li:hover {
  opacity: 1;
}



.main {
  display: none;
}
.main.loaded {
  display: block;
}


.chat {
  width: 820px;
  margin: 0 auto;
}

.screen {
  width: 800px;
  margin: 0 auto;
  background: #fff;
  border: 10px outset #000;
  border-radius: 10px;
  font-family: '隶书';
  font-weight: 800;
}
.content {
  width: 760px;
  height: 340px;
  padding: 10px;
  overflow: auto;

}
.status {
  width: 100%;
  height:38px;
  border-top: 2px solid #aaa;
}
.status-item {
  width: 266px;
  height: 38px;
  text-align: center;
  line-height: 38px;
  float: left;
  border-right: 1px solid #aaa;
  color: #333;
}
.shield, .clear {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.shield:hover , .clear:hover{
  background: #D2E3FD;
}
.shield:active, .clear:active {
  background: #C3E1FD;
}

.count {
  color: #666;
}
.shield {

}
.clear {

  border-right: none;
}



.title {
  text-align: center;
  font-family: '隶书', '楷体';
}

.input-box {
  width: 80%;
  height: 50px;
  margin: 0 auto;
  background: #fff;
  border: 10px outset #000;
  border-radius: 10px;
  position: relative;
  top: -10px;
  overflow: hidden;
}

.input {
  display: block;
  border: none;
  width: 100%;
  height: 30px;
  padding: 10px;
}


.content li {
  margin-top: 12px;
  clear: both;
  overflow: hidden;
}

img.face {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  vertical-align: middle;
}
.user {
  display: inline-block;
  height: 24px;
  vertical-align: middle;
}

.pull-right {
  float: right;
}

.content-info {
  position: relative;
  display: inline-block;
  max-width: 200px;
  margin: 0;
  margin-left: 5px;
  padding: 5px 8px;
  background: #9AB5F9;
  border-radius: 8px;
  vertical-align: middle;
}
.content-else-info:before {
  content: '';
  display: inline-block;
  width: 0px;
  height: 0px;
  position: absolute;
  left: -12px;
  top: 5px;
  border: 6px transparent solid;
  border-right-color: #9AB5F9;
}

.content-my-info {
  margin-right: 10px;
  background: #8EE3AA;
  
}

.content-my-info:after {
  content: '';
  display: inline-block;
  width: 0px;
  height: 0px;
  position: absolute;
  right: -12px;
  top: 5px;
  border: 6px transparent solid;
  border-left-color: #8EE3AA;
}